<template>
  <div class="box">
    <van-nav-bar
      :title="list.community"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in list.houseImg" :key="index">
        <van-image
          width="100"
          height="100"
          :src="'http://liufusong.top:8080'+item"
        />
      </van-swipe-item>
    </van-swipe>

    <van-card
      :title="list.title"
    >
      <template #tags>
        <van-tag v-for="(item,index) in list.tags" :key="index" plain type="danger">{{ item }}</van-tag>
      </template>
    </van-card>

    <div class="content">
      <div class="box2">
        <div class="info">
          <span>{{ list.price }}</span>
          <span>租金</span>
        </div>
        <div class="info">
          <span>{{ list.roomType }}</span>
          <span>房型</span>
        </div>
        <div class="info">
          <span>{{ list.size }}</span>
          <span>面积</span>
        </div>
      </div>
    </div>

    <div class="cla">
      <div class="left">
        <span>装修：精装</span>
        <span>楼层：234</span>
      </div>
      <div class="right">
        <span>朝向：{{ list.oriented }}</span>
        <span>类型：普通住宅</span>
      </div>
    </div>

    <div class="location">
      <span>小区：1233</span>
      <div class="map">
        123
      </div>
    </div>

    <van-cell title="房屋配置" />
    <div class="match">
      <van-grid :column-num="6">
        <van-grid-item v-for="(item,index) in list.supporting" :key="index" icon="photo-o" :text="item" />
      </van-grid>
    </div>

    <div class="overview">
      <van-cell title="房源概况" />
      <div class="bom">
        <div class="img-info">
          123
        </div>
        <div class="txt">
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
        </div>
      </div>
    </div>

    <div class="like">
      <van-cell title="猜你喜欢" />

      <van-card
        price="4500元/月"
        desc="72.32m²/南/北/低楼层"
        title="安贞西里3室一厅"
        thumb="https://img01.yzcdn.cn/vant/apple-1.jpg"
      >
        <template #tags>
          <van-tag plain type="danger">近地铁</van-tag>
        </template>
      </van-card>

      <van-card
        price="4500元/月"
        desc="72.32m²/南/北/低楼层"
        title="安贞西里3室一厅"
        thumb="https://img01.yzcdn.cn/vant/apple-1.jpg"
      >
        <template #tags>
          <van-tag plain type="danger">近地铁</van-tag>
        </template>
      </van-card>

      <van-card
        price="4500元/月"
        desc="72.32m²/南/北/低楼层"
        title="安贞西里3室一厅"
        thumb="https://img01.yzcdn.cn/vant/apple-1.jpg"
      >
        <template #tags>
          <van-tag plain type="danger">近地铁</van-tag>
        </template>
      </van-card>
    </div>

    <div class="footer">
      <van-button class="btn" type="default">
        <van-icon name="star-o" />
        收藏
      </van-button>
      <van-button class="btn" type="default">在线咨询</van-button>
      <van-button class="btn" type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import { gethousesid } from '@/api/home.js'
import bus from '@/bus/bus.js'
export default {
  // inject: {
  //   housesid: {
  //     type: Array,
  //     default: null
  //   }
  // },
  // inject: ['housesid'],
  data() {
    return {
      id: '',
      list: []
    }
  },
  mounted() {
    this.gethousesid()
  },
  beforeDestroy() {
    bus.$off('housesid')
  },
  created() {
    bus.$on('housesid', async(val) => {
      this.id = val
    })
  },

  methods: {
    onClickLeft() {
      this.$router.back()
    },
    async gethousesid() {
      const res = await gethousesid(this.id)
      console.log(res.data.body)
      this.list = res.data.body
    }

  }
}
</script>

<style scoped lang='less'>
html,body{
  width: 100%;
  height: 100%;
}
.box{
  width: 100%;
  height: 100%;
  background-color: #f6f5f6;
}
.van-nav-bar{
  background-color: green;
}
/deep/.van-nav-bar__title{
  color: #fff;
}
/deep/.van-nav-bar__arrow{
  color: #fff !important;
}
// 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  /deep/.van-image{
    width: 100% !important;
    height: 214.94px !important;
  }

  .van-card{
    background-color: #fff;
  }
  .van-card__title{
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .van-card__content{
    border-bottom: 1px solid green;
  }
  .content{
    padding: 15px;
    background-color: #fff;
    .box2{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 15px;
      border-bottom: 1px solid green;
      background-color: #fff;
    }
    .info{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .cla{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color: #fff;
    .left,.right{
      display: flex;
      flex-direction: column;
    }
  }
  .location{
    margin-top: 15px;
    background-color: #fff;
    span{
      padding: 15px;
    }
    .map{
      height: 145px;
      width: 100%;
      background-color: pink;
    }
  }
  .van-cell__title{
    border-bottom:1px solid green ;
  }
  .match{
    width: 100%;
    background-color: #fff;
  }
/deep/.van-cell::after{
  border: 0px !important;
}
/deep/.van-grid-item__content::after{
  border: 0px !important;
}
/deep/.van-hairline--top::after{
  border: 0px;
}
.overview{
  margin-top: 15px;
  background-color: #fff;
  .bom{
    padding: 15px;
  }
}
.like{
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}
.van-card__content{
  border: 0px;
}
.van-card__header{
  padding-bottom: 15px;
  border-bottom:1px solid green ;
}
.footer{
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.btn{
  flex: 1;
}
.box{
  background-color: #fff;
  padding-bottom: 30px;
}
</style>
